<template>
  <div class="chat-container" :class="{ 'chat-visible': isVisible }">
    <!-- 头部区域 -->
    <div class="chat-header">
      <div class="header-left">
        <div class="status-indicator"></div>
        <div class="header-info">
          <h2>智能助手</h2>
          <span class="status-text">在线</span>
        </div>
      </div>
      <button class="close-btn" @click="closeChat">
        <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
          <path d="M12 4L4 12M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
        </svg>
      </button>
    </div>

    <!-- 消息区域 -->
    <div class="chat-messages" ref="messagesRef">
      <div class="messages-wrapper">
        <transition-group name="message" tag="div" class="messages-list">
          <div
            v-for="(msg, idx) in messages"
            :key="msg.id || idx"
            :class="['chat-message', msg.user === '我' ? 'sent' : 'received']"
          >
            <div class="message-avatar" v-if="msg.user !== '我'">
              <div class="avatar-circle">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none">
                  <path d="M8 8a3 3 0 100-6 3 3 0 000 6zM8 10c-2.67 0-8 1.34-8 4v1h16v-1c0-2.66-5.33-4-8-4z" fill="currentColor"/>
                </svg>
              </div>
            </div>
            <div class="message-content">
              <div class="message-bubble">
                <div class="message-text">{{ msg.text }}</div>
                <div class="message-time">{{ formatTime(msg.timestamp) }}</div>
              </div>
            </div>
          </div>
        </transition-group>
      </div>
      
      <!-- 输入提示 -->
      <div v-if="isTyping" class="typing-indicator">
        <div class="typing-dots">
          <span></span>
          <span></span>
          <span></span>
        </div>
        <span class="typing-text">正在输入...</span>
      </div>
    </div>

    <!-- 输入区域 -->
    <div class="chat-input-container">
      <div class="chat-input">
        <div class="input-wrapper">
          <textarea
            v-model="input"
            ref="inputRef"
            @keydown="handleKeydown"
            @input="handleInput"
            placeholder="输入消息..."
            rows="1"
            :class="{ 'focused': inputFocus }"
            @focus="inputFocus = true"
            @blur="inputFocus = false"
          ></textarea>
          <div class="input-actions">
            <button 
              class="emoji-btn"
              @click="toggleEmoji"
              title="表情"
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <circle cx="12" cy="12" r="10" stroke="currentColor" stroke-width="1.5"/>
                <path d="M8 14s1.5 2 4 2 4-2 4-2M9 9h.01M15 9h.01" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
              </svg>
            </button>
            <button 
              class="send-btn" 
              @click="sendMessage" 
              :disabled="!canSend"
              :class="{ 'active': canSend }"
            >
              <svg width="18" height="18" viewBox="0 0 24 24" fill="none">
                <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              </svg>
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, nextTick, computed, onMounted, watch } from 'vue'

const emit = defineEmits(['closeChat'])

// 响应式数据
const input = ref('')
const inputFocus = ref(false)
const isVisible = ref(false)
const isTyping = ref(false)
const messagesRef = ref(null)
const inputRef = ref(null)

// 消息数据
const messages = ref([
  { 
    id: 1,
    user: '系统', 
    text: '您好！我是您的智能助手，有什么可以帮助您的吗？', 
    timestamp: new Date()
  }
])

// 计算属性
const canSend = computed(() => input.value.trim().length > 0)

// 方法
const sendMessage = async () => {
  if (!canSend.value) return
  
  const message = {
    id: Date.now(),
    user: '我',
    text: input.value.trim(),
    timestamp: new Date()
  }
  
  messages.value.push(message)
  input.value = ''
  
  // 滚动到底部
  await nextTick()
  scrollToBottom()
  
  // 模拟回复
  simulateResponse()
}

const simulateResponse = () => {
  isTyping.value = true
  
  setTimeout(() => {
    isTyping.value = false
    messages.value.push({
      id: Date.now(),
      user: '助手',
      text: '我收到了您的消息，正在为您处理...',
      timestamp: new Date()
    })
    nextTick(() => scrollToBottom())
  }, 1500)
}

const scrollToBottom = () => {
  if (messagesRef.value) {
    messagesRef.value.scrollTop = messagesRef.value.scrollHeight
  }
}

const closeChat = () => {
  emit('closeChat')
}

const formatTime = (timestamp) => {
  return new Date(timestamp).toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit'
  })
}

const handleKeydown = (e) => {
  if (e.key === 'Enter' && !e.shiftKey) {
    e.preventDefault()
    sendMessage()
  }
}

const handleInput = (e) => {
  // 自动调整输入框高度
  const textarea = e.target
  textarea.style.height = 'auto'
  textarea.style.height = Math.min(textarea.scrollHeight, 120) + 'px'
}

const toggleEmoji = () => {
  // 表情选择器功能
  console.log('Toggle emoji picker')
}

// 生命周期
onMounted(() => {
  isVisible.value = true
  scrollToBottom()
})

// 监听消息变化
watch(messages, () => {
  nextTick(() => scrollToBottom())
}, { deep: true })
</script>

<style scoped>
.chat-container {
  width: 380px;
  height: 520px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border-radius: 24px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 
    0 20px 40px rgba(0, 0, 0, 0.1),
    0 8px 32px rgba(0, 0, 0, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'SF Pro Display', sans-serif;
  transform: translateY(20px);
  opacity: 0;
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.chat-visible {
  transform: translateY(0);
  opacity: 1;
}

/* 头部样式 */
.chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px 16px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  position: relative;
  border-radius: 24px 24px 0 0;
}

.chat-header::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  opacity: 0.9;
  border-radius: 24px 24px 0 0;
}

.header-left {
  display: flex;
  align-items: center;
  gap: 12px;
  position: relative;
  z-index: 1;
}

.status-indicator {
  width: 8px;
  height: 8px;
  background: #4ade80;
  border-radius: 50%;
  animation: pulse 2s infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

.header-info h2 {
  color: white;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  line-height: 1.2;
}

.status-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: 12px;
  font-weight: 400;
}

.close-btn {
  background: rgba(255, 255, 255, 0.15);
  border: none;
  color: white;
  width: 32px;
  height: 32px;
  border-radius: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  position: relative;
  z-index: 1;
}

.close-btn:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: scale(1.05);
}

/* 消息区域 */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  position: relative;
}

.chat-messages::-webkit-scrollbar {
  width: 4px;
}

.chat-messages::-webkit-scrollbar-track {
  background: transparent;
}

.chat-messages::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 2px;
}

.messages-wrapper {
  padding: 20px 16px;
  min-height: 100%;
}

.messages-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.chat-message {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}

.chat-message.sent {
  flex-direction: row-reverse;
}

.message-avatar {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.avatar-circle {
  width: 32px;
  height: 32px;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
}

.message-content {
  max-width: 75%;
  display: flex;
  flex-direction: column;
}

.message-bubble {
  padding: 12px 16px;
  border-radius: 20px;
  position: relative;
  word-break: break-word;
  transition: all 0.2s ease;
}

.sent .message-bubble {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  border-bottom-right-radius: 8px;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.received .message-bubble {
  background: white;
  color: #1e293b;
  border-bottom-left-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(226, 232, 240, 0.8);
}

.message-text {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 4px;
}

.message-time {
  font-size: 11px;
  opacity: 0.6;
  text-align: right;
}

.sent .message-time {
  color: rgba(255, 255, 255, 0.8);
}

.received .message-time {
  color: #64748b;
}

/* 输入提示 */
.typing-indicator {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  color: #64748b;
  font-size: 13px;
}

.typing-dots {
  display: flex;
  gap: 3px;
}

.typing-dots span {
  width: 4px;
  height: 4px;
  background: #94a3b8;
  border-radius: 50%;
  animation: typing 1.4s infinite;
}

.typing-dots span:nth-child(2) { animation-delay: 0.2s; }
.typing-dots span:nth-child(3) { animation-delay: 0.4s; }

@keyframes typing {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
}

/* 输入区域 */
.chat-input-container {
  background: white;
  border-top: 1px solid rgba(226, 232, 240, 0.8);
  padding: 16px;
}

.chat-input {
  position: relative;
}

.input-wrapper {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: 16px;
  padding: 8px 12px;
  transition: all 0.2s ease;
}

.input-wrapper:has(textarea:focus) {
  border-color: #667eea;
  background: white;
  box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.input-wrapper textarea {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-size: 15px;
  line-height: 1.5;
  resize: none;
  font-family: inherit;
  color: #1e293b;
  min-height: 20px;
  max-height: 120px;
}

.input-wrapper textarea::placeholder {
  color: #94a3b8;
}

.input-actions {
  display: flex;
  align-items: center;
  gap: 4px;
}

.emoji-btn,
.send-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.emoji-btn {
  background: transparent;
  color: #94a3b8;
}

.emoji-btn:hover {
  background: #f1f5f9;
  color: #667eea;
}

.send-btn {
  background: #e2e8f0;
  color: #94a3b8;
}

.send-btn.active {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  transform: scale(1.05);
}

.send-btn:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* 动画效果 */
.message-enter-active {
  transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.message-enter-from {
  opacity: 0;
  transform: translateY(20px) scale(0.9);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .chat-container {
    width: 100vw;
    height: 100vh;
    border-radius: 0;
    border: none;
  }
  
  .chat-header {
    border-radius: 0;
  }
}
</style>